<template>
    <div class="chart_dom" :class="{ 'test': this.$router.history.current.name === 'testAnaly' }">
        <div class="query_com" v-if="!menuName.includes('testAnaly')">
            <!-- 分析记录 -->
            <div class="chart_records">
                <div class="records">任务记录：</div>
                <el-select v-model="queryParams.taskId" @change="task">
                    <el-option v-for="item in taskOptions" :key="item.taskId" :label="item.taskName" :value="item.taskId">
                    </el-option>
                </el-select>
            </div>
            <!-- 下载 -->
            <el-dropdown @command="handleCommand" v-if="option.downloadItem && option.downloadItem.length">
                <div class="chart_download">
                    <span class="el-dropdown-link">
                        <i class="el-icon-bottom"></i>
                    </span>
                </div>
                <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item :command="item" v-for="(item, index) in option.downloadItem" :key="index">{{
                        downloadList[item] }}</el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
        </div>
        <div class="viewer_com">
            <iframe :src="option.url" frameborder="0" class="viewer" v-if="option.type === 5" :class="{ 'test': this.$router.history.current.name === 'testAnaly' }"></iframe>
            <viewerCom :url="option.url" :key="option.url" v-else />
        </div>
    </div>
</template>

<script>
import { deepClone } from '@/utils';
import { Loading } from 'element-ui';
import { getPageSettingRequest, commitDrawTaskRequest, downloadDrawFileRequest, getPageDrawRecordRequest } from '@/api/tools'
export default {
    name: 'GenescloudUiIndex',
    props: {
        taskList: {
            type: Array,
            default: () => []
        },
        taskId: {
            type: String,
            default: ''
        }
    },
    data() {
        return {
            testList: [],
            taskOptions: [],
            option: {
                url: '',
            },
            // url:'https://xt.cloudtutu.com:443/file/barplot//2023/12/20//ea33f202-ef64-404f-9fe1-9a777d78f9a4/ea33f202-ef64-404f-9fe1-9a777d78f9a4.pca3D.html?1703057334270',
            queryParams: {
                taskId: '示例'
            },
            downloadList: {
                "jpg": "JPG下载",
                "png": "PNG下载",
                "resultFile": "结果文件",
                "result": "结果表格",
                "svg": "SVG下载",
                "pdf": "PDF下载",
            },
            //loading效果
            options: {
                background: 'rgba(0,0,0,.5)',
                target: '.viewer_com'
            },
            menuName: null,
            downloadName: '示例',
        };
    },
    watch: {
        '$attrs.option': {
            handler(val, newVal) {
                if (val) {
                    this.init(val)
                }
            },
            immediate: true,
            deep: true
        },
        taskList: {
            handler(val, newVal) {
                if (val && val.length) {
                    this.taskOptions = val
                    this.task(val[1].taskId)
                }
            },
            immediate: true,
            deep: true
        },
        taskId: {
            handler(val, newVal) {
                if (val) {
                    this.task(val)
                }
            },
            immediate: true,
        }
    },
    created() {
        this.menuName = this.$route.fullPath
        if (!this.menuName.includes('testAnaly')) { this.taskInit() }
    },
    methods: {
        init(value) {
            this.option = deepClone(value)
        },
        async taskInit() {
            const pageCode = this.$router.history.current.name
            this.$store.commit('menu/SIDEBAR_MENU', 'chartOverview')
            const res = await getPageDrawRecordRequest(pageCode)
            if (res.code !== 200) return this.$message.error(res.message)
            this.taskOptions = res.data
            if (this.$queryToObjectsearch(window.location.search).taskId) {
                this.queryParams.taskId = this.$queryToObjectsearch(window.location.search).taskId
            } else if (this.$route.params.taskId) {
                this.queryParams.taskId = this.$route.params.taskId
            } else {
                this.queryParams.taskId = res.data[0].taskId
            }
        },
        //点击下载
        async handleCommand(downloadType) {
            let list = {
                'result': 'xls',
                'resultFile': 'zip',
                'jpg': 'jpg',
                'png': 'png',
                'svg': 'svg',
                'pdf': 'pdf'
            }
            let pageCode = this.$router.history.current.name
            let taskId = this.queryParams.taskId
            const res = await downloadDrawFileRequest({ pageCode, taskId, downloadType })
            if(res.code == 500) return this.$message.error('下载绘图文件出错')
            this.$dropDown(res, this.downloadName + '.' + list[downloadType])
        },
        task(value) {
            this.$emit('task', value);
            this.queryParams.taskId = value
        }
    },
};
</script>

<style lang="scss" scoped>
.chart_dom {
    display: flex;
    flex-direction: column;

    &.test {
        height: calc(100vh - 150px);
    }

    .query_com {
        height: 40px;
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .chart_records {
            display: flex;
            align-items: center;

            .records {
                min-width: 85px;
            }

            ::v-deep .el-input__inner {
                height: 32px;
                line-height: 32px;
                border-radius: 6px;
            }

            ::v-deep .el-input__icon {
                line-height: 32px;
            }
        }

        .chart_download {
            margin-left: 10px;
            width: 30px;
            height: 30px;
            line-height: 30px;
            cursor: pointer;
            background-color: #f0f0f0;
            text-align: center;
            color: #666;
        }
    }

    .viewer_com {
        width: 100%;
        cursor: zoom-in;
        overflow-x: auto;
        flex: 1;
        min-height: calc(100vh - 300px);
        text-align: center;

        &::-webkit-scrollbar {
            background-color: transparent;
            width: 6px;
            height: 10px;
        }

        &:hover::-webkit-scrollbar-thumb {
            background-color: rgba(50, 50, 50, 0.25);
            border: 0;
            border-radius: 3px;
        }

        &::-webkit-scrollbar-track {
            background-color: rgba(50, 50, 50, 0.05);
        }

        .viewer {
            width: 100%;
            min-height: calc(100vh - 300px);
            &.test{
                min-height: calc(100vh - 155px);
            }
        }
    }
}
</style>